<template>
	<view class="pages">
		<!-- <view class="tag">
			<view class="tag-item" :class="tagIndex==0?'tag-item-active-color':'tag-item-color'" @click="tagswitch(0)">选择日期</view>
			<view class="tag-item" :class="tagIndex==1?'tag-item-active-color':'tag-item-color'" @click="tagswitch(1)">今日订单</view>
			<view class="tag-item" :class="tagIndex==2?'tag-item-active-color':'tag-item-color'" @click="tagswitch(2)">总订单</view>
		</view> -->
		
		<view class="tag">
			<picker mode="date" @change="bindDateChange($event,0)">
				<view class="tag-item" :class="tagIndex==0?'tag-item-active-color':'tag-item-color'">{{tagText}}</view>
			</picker>
			<view class="tag-item" :class="tagIndex==1?'tag-item-active-color':'tag-item-color'" @click="tagswitch(1)">今日订单</view>
			<view class="tag-item" :class="tagIndex==2?'tag-item-active-color':'tag-item-color'" @click="tagswitch(2)">总订单</view>
		</view>

		

		<view class="list">
			<view class="list-tag">
				<view>商品图片</view>
				<view>商品名称</view>
				<view>今日已售</view>
			</view>
			<view class="list-item">
				<image src="" mode=""></image>
				<view class="title">SULWHASOO雪花秀气垫BB霜SULWHASOO雪花秀气垫BB霜</view>
				<view class="num">10</view>
			</view>
			<view class="list-item">
				<image src="" mode=""></image>
				<view class="title">SULWHASOO雪花秀气垫BB霜SULWHASOO雪花秀气垫BB霜</view>
				<view class="num">10</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tagIndex: 1,
				tagText: '选择日期'
			}
		},
		methods: {
			tagswitch(e) {
				var self = this;
				self.tagIndex = e;
				self.tagText = '选择日期';
			},
			bindDateChange(event,i){
				var self = this;
				self.tagIndex = i;
				self.tagText = event.detail.value;
			}
		}
	}
</script>

<style lang="less">
	.pages {
		padding-top: 94rpx;

		.tag {
			width: 100%;
			background: #FFFFFF;
			padding: 0 30rpx;
			display: flex;
			justify-content: space-between;
			border-top: 2rpx solid #DDDDDD;
			border-bottom: 2rpx solid #DDDDDD;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;

			.tag-item {
				font-size: 28rpx;
				line-height: 90rpx;
			}

			.tag-item-color {
				color: #999999;
			}

			.tag-item-active-color {
				color: #DD4134;
				position: relative;
			}

			.tag-item-active-color::after {
				content: "";
				width: 30rpx;
				height: 4rpx;
				background-color: #DD4134;
				position: absolute;
				left: 50%;
				bottom: 0;
				margin-left: -15rpx;
			}
		}

		.list {
			background-color: #FFFFFF;
			padding: 40rpx 30rpx 10rpx;

			.list-tag {
				display: flex;
				justify-content: space-between;
				padding: 0 30rpx;
				background-color: #f0f0f0;

				view {
					font-size: 24rpx;
					color: #666666;
					line-height: 50rpx;
				}
			}

			.list-item {
				display: flex;
				justify-content: space-between;
				padding: 24rpx 20rpx;
				border-bottom: 2rpx solid #eeeeee;

				image {
					display: block;
					width: 92rpx;
					height: 92rpx;
					border-radius: 10rpx;
					background-color: red;
				}

				.title {
					width: 400rpx;
					font-size: 24rpx;
					color: #333333;
					line-height: 92rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.num {
					font-size: 24rpx;
					color: #DD4134;
					line-height: 92rpx;
				}
			}

			.list-item:last-child {
				border-bottom: none;
			}
		}
	}
</style>
